<template>
<div class='illegalimplement'>
  <router-link
    v-for="list in datalists"
    :key="list.id"
    :to="list.url"
    :class="['imp-box','imp'+list.id]"
    tag="div"
    :ref="'imp'+list.id"
  >
    <!-- <ImpBorder></ImpBorder> -->
    <p class="logo"><span class="title">{{list.title}}</span><cite class="time">{{list.time}}</cite></p>
    <div class="guidechart">
      <div class="gcolumn"
        v-for="(child,index) in list.children"
        :key="index"
        :class="list.id==4&&index==0?'gtxtcenter':''"
      >
        <div v-if="child.txt.length > 1" class="txtflexmore">
          <div v-for="(gt,index) in child.txt"><b :style="gt.name=='实施进度'?'line-height:70px;':''">{{gt.name}}</b><div class="uni">{{gt.unit}}</div><strong :class="gt.unit.length<2?'stroLiH100':''">{{gt.num}}</strong></div>
          <div class="txtchart" v-if="(list.id!=2)&&(list.id!=4)">
            <div class="impro-box" style="position:relative;">
              <div class="imppro-bar" :class="'imp'+list.id" :style="{width:child.value+'%'}" >
                <span class="impro-num" style="position:absolute;top:6px;right:-15px;z-index:222">{{child.value}}%</span>
              </div>
              <!-- <div class="impro-num">{{child.value}}%</div> -->
            </div>

          </div>
        </div>
        <div v-if="child.txt.length == 1 && child.txt[0].num!='' && child.type" class="txtflexlittle">
          <div v-for="(gt,index) in child.txt"><b>{{gt.name}}</b><div class="uni" :style="gt.name=='同比'?'height:25px':''">{{gt.unit}}</div>
          <strong >{{gt.num}}</strong></div>
          <div class="txtchart">
            <ve-line
              width="100%"
              height="100%"
              v-if="child.type=='arealine'"
              :data="child.data"
              :settings="child.settings"
              :extend="arealineConfig3(curColor[list.id-1])"
              :colors="curColor[list.id-1]"
              :after-set-option="afterSetOption">
            </ve-line>
          </div>
        </div>
        <div v-if="child.txt.length == 1 && child.txt[0].num===''" class="txtflexNoNum">
          <div v-for="(gt,index) in child.txt"><b>{{gt.name}}</b><div class="uni">{{gt.unit}}</div><strong>{{gt.num}}</strong></div>
          <div class="txtNoNumchart">
            <ve-bar
              width="100%"
              height="100%"
              v-if="child.type=='bar'"
              :data="child.data"
              :settings="child.settings"
              :extend="list.id%2==0?gridbarguide1:gridbarguide2"
              :colors="curColor[list.id-1]"
              >
            </ve-bar>
            <ve-pie
              height="100%"
              width="100%"
              v-if="child.type =='pie'"
              :data="child.data"
              :extend="child.tag === true? pielegendYNL:pielegendNYL"
              :colors="curColor[list.id-1]"
            >
            </ve-pie>
          </div>
        </div>
        <div v-if="child.txt.length == 1 && !child.type" class="txtNumNoChart">
           <div v-for="(gt,index) in child.txt"><b>{{gt.name}}</b><div class="uni">{{gt.unit}}</div><strong>{{gt.num}}</strong></div>
        </div>
      </div>
    </div>
  </router-link>
</div>
</template>

<script>
import echarts from 'echarts'
import ImpBorder from '@/components/ImpBorder'
import { dataliststest, chartColors, baseConfigs, pielegendYNL, pielegendNYL, arealineConfig, gridbarguide1, barImpProgressLabel, gridbarguide2 } from '@/modules/navChartOptions'

export default {
  name: 'illegalimplement',
  components: {
    ImpBorder
  },
  data () {
    return {
      datalists: [],
      barwidth: 0
    }
  },
  computed: {
    // 导览页图表的测试数据
    dataliststest () {
      return dataliststest
    },
    // apiuirl
    curApiUrl () {
      return this.$store.getters.curApiUrl
    },
    // 图表颜色
    curColor () {
      return chartColors
    },
    // 图表基本配置
    baseConfigs () {
      return baseConfigs
    },
    // 图表的不同配置
    // 条形图
    gridbarguide1 () {
      return gridbarguide1
    },
    barImpProgressLabel () {
      return barImpProgressLabel
    },
    gridbarguide2 () {
      return gridbarguide2
    },
    arealineConfig () {
      return arealineConfig
    },
    // 饼图有图例无标签
    pielegendYNL () {
      return pielegendYNL
    },
    // 饼图无图例有标签
    pielegendNYL () {
      return pielegendNYL
    }
  },
  watch: {},
  methods: {
    afterSetOption (instance) {
      let option = instance.getOption()
      instance.clear()// 清掉 才会重绘 有动画
      instance.setOption(option)
    },
    arealineConfig3 (color_list) {
      let temp = Object.assign({}, this.arealineConfig, {
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: color_list[0]
          }, {
            offset: 1,
            color: 'rgba(255, 255, 255, .2)'
          }])
        }
      }
      )
      return temp
    }
  },
  mounted () {
    // 图表测试数据
    // this.datalists = this.dataliststest
    const curApiUrl = this.$store.getters.curApiUrl
    this.$axios.get(`${curApiUrl}/api/guide`).then(res => {
      this.datalists = res.data
    })
  }
}
</script>
<style lang='stylus' scoped>

// 此界面的基本样式
.imp1
  p
    > span
      color #ffeb3b
  strong
    color #ffeb3b

.imp2
  p
    > span
      color #009688
  strong
    color #009688

.imp3
  p
    > span
      color #e91e63
  strong
    color #e91e63
.imp4
  p
    > span
      color #00bcd4
  strong
    color #00bcd4

// 内部图表里文字样式
span
  display inline-block
  // font-size 28px
  font-weight 600
  padding-right 20px
  // padding 8px 20px 8px 30px

cite
  font-style normal
  font-family "楷体"
  color #D7D7D7
  // font-size 18px
  display inline-block
  vertical-align top
  letter-spacing 1px
b
  white-space nowrap
  overflow hidden

strong
  font-weight bold
  line-height 65px

.gtxtcenter
  display flex
  flex-direction column
  justify-content center

.gchart
  width 100%
  height 100%

// 图表标题
p
  width 100%
    .title
      font-size 28px
      font-weight 800

.illegalimplement
  width 100%
  height 100%
  display flex
  flex-wrap wrap
  align-items center
  margin 0 5%

  > div
    display inline-block
    background url('../../assets/imp.png') no-repeat
    // width 800px
    // height 320px
    // width 47%
    // height 44%
    margin 0px auto
    // border 1px solid #aaa
    // -moz-box-shadow 1px 1px 5px #aaa inset
    // -webkit-box-shadow 1px 1px 5px #aaa inset
    // box-shadow 1px 1px 5px #aaa inset
    // background rgba(11,25,74,0.2)
    cursor pointer
    position relative

  > div:hover
    cursor pointer
    // background rgba(11,25,74,1)
    // box-shadow 5px 5px 10px rgba(255,255,255,0.3) inset

// 导航模块各个内容
.guidechart
  width 100%
  margin-top 15px
  display flex
  justify-content center

  .gcolumn
    flex 1
    text-align center
    width 100%
    height 100%
    .txtflexmore
      width 100%
      height 100%
      display flex
      flex-direction column
      >div
        flex 1
        &:last-child
          strong
            // line-height 48px

        // .uni
        //   font-size 12px
    .txtflexlittle
      width 100%
      height 100%
      display flex
      flex-direction column
      >div
        flex 1
    .txtflexNoNum
      width 100%
      height 100%
      .txtNoNumchart
        width 100%
        height calc(100% - 60px)

// 解决文本的有无单位对齐问题
.txtflexmore
  div:last-child
    strong.stroLiH100
      font-weight bold
      line-height 96px!important

// 实施进度图表
.impro-box
  width 75%
  height 30px
  border 1px solid #aaa
  padding 3px 0
  margin -10px auto
  border-radius 6px
.imppro-bar
  // width 80%
  height 90%
  padding 2px 0 1px 0

.imppro-bar.imp1
  background linear-gradient(to right,#000,#ffeb3b)

.imppro-bar.imp3
  background linear-gradient(to right,#000,#e91e63)

// logo
.logo
  margin-left 20px
  margin-top 15px
  .title
    padding-left 55px
.imp1
  .logo
    background url('../../assets/images/themeguide/logo_land.png') no-repeat

.imp2
  .logo
    background url('../../assets/images/themeguide/logo_people.png') no-repeat

.imp3
  .logo
    background url('../../assets/images/themeguide/logo_implet.png') no-repeat

.imp4
  .logo
    background url('../../assets/images/themeguide/logo_industry.png') no-repeat
</style>
